<template>
    <div>
        <h3>{{$route.query}}</h3>
        <h3>Vuex</h3>
        <button>刘德华:{{$store.state.liuDeHua}}|{{liu}}</button>
        <button>郭富城:{{$store.state.guoFuCheng}}|{{guoFuCheng}}</button>
        <button>黎明:{{$store.state.liMing}}|{{liMing}}</button>
        <button>张学友:{{$store.state.zhangXueYou}}|{{zhangXueYou}}</button>
        <h3 @click="fn">{{arr}}</h3>
    </div>
</template>

<script>
// 1- Vuex是一个对数据状态进行集中式管理的工具。
// import {mapState} from "vuex";
import {mapState} from "@/test/myVuex";
export default {
    name: "Study",
    data(){
        return {
            liuDeHua:90,
            arr:[0,1]
        }
    },
    methods:{
        fn(){
            // this.arr[0] = 100;
            // this.arr.push(1)
            // const copyArr = [...this.arr];
            // copyArr[0] = 100;
            // this.arr = copyArr;

            this.$set(this.arr,0,100);

            // console.log(this.arr);
        }
    },
    // 1
    // computed:mapState(["liuDeHua","liMing","guoFuCheng","zhangXueYou"])
    // 2
    computed:{
        ...mapState(["liMing","guoFuCheng","zhangXueYou"]),
        ...mapState({
            liu(state){
                return state.liuDeHua;
            }
        })
    }

    // 3
    // computed:{
    //     liMing(){
    //         return this.$store.state.liMing;
    //     },
    //     guoFuCheng(){
    //         return this.$store.state.guoFuCheng;
    //     },
    //     zhangXueYou(){
    //         return this.$store.state.zhangXueYou;
    //     },
    //     liu(){
    //         return this.$store.state.liuDeHua;
    //     }
    // }


}
</script>

<style scoped>

</style>